<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" onkeydown="add(this)">
    <input type="text" onkeydown="abc(this)">
    <ul>
        <li>卧龙凤雏</li>
        <li class="two">常山赵子龙</li>
    </ul>
</body>
</html>
<script>
//    document.querySelector('input').onkeydown = function(e){
//     // console.log(e);
//       if (e.keyCode == 13){
//         let li = document.createElement('li');
//         li.innerText = this.value;
//         document.querySelector('ul').appendChild(li);
//         // document.querySelector('ul').append(`<li>${this.value}</li>`);
//         // appendChild 只能接受node节点，append 可以接受字符串
//       }
//    }

//    let doms = document.querySelectorAll('li');
//    console.log(doms);
//    for (let i = 0; i < doms.length; i++) {
//      doms[i].onclick = function(){
//         console.log(this);
//         document.querySelector('ul').removeChild(this);
//      }
//    }
// 上面的例子我们无法给未来添加的节点绑定事件


// 事件委托，
// 我们可以把子节点的事件，委托给祖先元素来完成，这样的过程我们称为事件委托

document.querySelector('ul').onclick = function(e){
    // e.target 是点击的目标元素
//    console.log(e.target.className);
//    console.log(this);
// this.removeChild(e.target);
   if(e.target.tagName.toLowerCase() == 'li'){
    this.removeChild(e.target);
   }
}

// 当给子元素添加某一个事件的时候，子元素有可能是未来追加的，我们习惯使用，事件委托。
// 当我们要给子元素，循环帮定同一个事件的时候，我们也可以使用事件委托，来减少内存的消耗。




// js 帮定事件的几种方式？
// 第一种，我们通过获取dom节点，通过onxxx 来绑定事件。
// 第二种，我们可以通过给节点添加事件监听 addEventListener 来绑定事件
// 第三种，我们可以直接通过标签来写事件名，script 来声明具名函数，来绑定

function add(val){ // e 相当于事件的形参。
//   console.log(window.event);
  if (window.event.keyCode == 13){
    console.log(val.value);
  }
}
function abc () {
    // window.event 是事件对象
 if (window.event.keyCode == 13){
    console.log(window.event.keyCode);
  }
}
</script>